<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>管理平台</title>

<style type="text/css">
.chooseBtn {
	display: none;
}

.choose-label {
	box-shadow: #ccc 0px 0px 0px 1px;
	width: 40px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	position: relative;
	background-color: #bdbdbd;
	overflow: hidden;
}

.choose-label:before {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	background-color: #fff;
	z-index: 20;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.chooseBtn:checked+label.choose-label:before {
	left: 20px;
}

.chooseBtn:checked+label.choose-label {
	background-color: #51ccee;
}
</style>
<jsp:include page="../../../include/header.jsp"></jsp:include>


</head>
<body>
	<div id="wrapper"  class="row">
		
				<div class="col-lg-12">
					<h1 class="page-header">天天特卖</h1>
					<label class="search-label">商品名称:</label>
						<input type="text" id="stitle" value="" class="form-control search-input width200" maxlength="21" placeholder="请输入商品名">
					<label class="search-label">推荐状态:</label>
					<div class="search-input">
						<select id="rstate" class="selectpicker form-control">
							<option value="0" selected>全部</option>
							<option value="1">推荐</option>
							<option value="2">未推荐</option>
						</select>
					</div>
					<button class="btn btn-success search-btn" onclick="query();">确定</button>
					<button class="btn btn-success search-btn" onclick="reset();">重置</button>
					
					<button type="button" onclick="javascript:window.location.reload()" class="btn btn-success  btn-refresh pull-right "><span class="fa fa-refresh fa-lg"></span></button>
					<button type="button" class="btn btn-success pull-right margin-lr" onclick="toAdd(11)">
									<span class="fa fa-plus"></span> 选择商品
								</button>
								<button type="button" class="btn btn-success pull-right " onclick="doSort()">
									<span class="fa fa-save"></span> 保存排序
								</button>
								<button type="button" class="btn btn-success pull-right margin-lr" onclick="toEditAll()"><span class="fa "></span>推荐本页</button>
								<div class="clearfix"></div>
				</div>
			<!-- 搜索框 -->
			
				<div class="col-lg-12 title-top">
					<div class=" text-muted single-line-text">
							共 <font color="#428bca" id="dataCount">0</font> 条记录
							<h5 class="page-header">注意：如名字和ID为空，则为商品已下架，且仍在本专题！请删除</h5>
					</div>
					<div class="table-responsive">
						<form id="sortForm" action="${BASE_PATH}/spike/recommend/doSort"
							method="post">
							<input type="hidden" name="sortKey" value="orderNo">
							<table id="dataTable" class="table table-striped table-hover">
								<thead>
									<tr>
										<!-- <th><input type="checkbox" id="selectAll" /><span>全选</span><th> -->
										<!-- <th>多选</th> -->
										<th width="10%">编号</th>
										<th width="10%">商品属性</th>
										<th width="10%">商品ID</th>
										<th width="50%">商品名称</th>
										<th width="10%">是否推荐</th>
										<th width="10%" ><input type="checkbox" id="selectAll" /><span>全选</span></th>
										<th width="10%">排序</th>
										<!-- <th>状态</th> -->
										<th width="10%">操作</th>
									</tr>
								</thead>
								<tbody id="dataList"></tbody>
							</table>
						</form>
					</div>
				<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
					</div>
		
	</div>
	<jsp:include page="../../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<!-- <td><input type="checkbox" id="checkcode" name="checkcode" value="{{item.id}}" ></td> -->
	<script type="text/html" id="dataTpl">
{{each list as item}}

<tr id="item{{item.id}}" data-id="{{item.id}}">
		
		<td>{{item.id}}</td>
		<td>{{item.goodsType | flagTransform:1,'普通',2,'兑换'}}</td>
		{{if item.goodsType==1}}
			<td>{{item.goodsid}}</td>
		{{else item.goodsType==2}}
			<td>{{item.egeId}}</td>
		{{/if}}
		{{if item.goodsType==1}}
			<td>{{item.name}}</td>
		{{else item.goodsType==2}}
			<td>{{item.egeName}}</td>
		{{/if}}
		<td>{{item.recommend | flagTransform:1,'推荐',0,'不推荐'}}</td>
		<td><input type="checkbox" name="checkcode" value="{{item.id}}" style="height:20px;"></td>
		<td><input name="orderNo{{item.id}}" value="{{item.orderNo}}" size="3" class="order form-control width50" required></td>
 		<td><button type="button" class="btn btn-sm btn-primary btn-simple" onclick="toEdit('{{item.id}}')" title="推荐"><span class="fa fa-edit fa-lg"></span></button><button type="button" class="btn btn-sm btn-danger btn-simple" onclick="toDelete('{{item.id}}')" title="删除"><span class="fa fa-remove fa-lg">删除</span></button> 
</td>
	</tr>
	{{/each}}
</script>
	<script type="text/javascript">
	var dataPaginator;
	$(query);
	function query(){
		var pageSize=$("#pageSize").val();
		var params = {
			pageSize:pageSize,
			group:11,
			title:$("#stitle").val(),
			state:$("#rstate").val()
		};
		if(dataPaginator){
			dataPaginator.destroy();
		}
		dataPaginator = Kit.pagination("#dataPagination",
				"${BASE_PATH}/spike/recommend/page", params, function(
						result) {
					/* console.log(result);
					console.log(result.object.totalRow); */
					//设置显示最新的数据数量
					$("#dataCount").html(result.object.totalRow);
					//根据模板渲染数据并填充
					$("#dataList").empty().append(
							template("dataTpl", result.object));
				});

	}

		function reset() {
			$("#stitle").val("");
		}

		var addDialog
		function toAdd(group) {
			addDialog = Kit.dialog("添加活动",
					"${BASE_PATH}/spike/recommend/toAdd/" + group,{closable:true,size:'size-wide'}).open();
		}
		var editDialog
		function toEdit(id) {
			editDialog = Kit.dialog("置顶",
					"${BASE_PATH}/spike/recommend/toEdit/" + id,{closable:true,size:'size-wide'}).open();

		}

		/* var addGoodsDialog;
		function toAddGoods(id) {
			addGoodsDialog = Kit.dialog("添加商品", "${BASE_PATH}/spike/list/toAddGoods/"+id).open();
		} */

		function toDelete(id) {
			Kit.confirm("提示", "您确定要删除这条数据吗？", function() {
				$.post("${BASE_PATH}/spike/recommend/doDelete/" + id, function(
						result) {
					$("#item" + id).remove();
				});
			});
		}

		/* 实现全选和全不选 */
		$("#selectAll").on('click', function() {
			$("input[name='checkcode']").prop("checked", this.checked);

		});
		//批量推荐
		function toEditAll() {
			var adIds = "";  
			$("input:checkbox[name=checkcode]:checked").each(function(i){  
				if(0==i){  
					adIds = $(this).val();  
				}else{
					adIds += (","+$(this).val());  
				}
			}); 
			if(adIds==""){
				Kit.alert("请选择要推荐的商品");
			}else{
				$.post("${BASE_PATH}/spike/recommend/toEditAll?adIds="+adIds,function(result){
					if(result.flag==0){
						Kit.alert("推荐成功");
						onEditSuccess(result.object);
					}else{
						Kit.alert("操作失败");return;
					}
				});
			}
		}
		/* 异步刷新 */
		function onEditSuccess(newObject){
			$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
		} 
		$("input[name='checkcode']").on(
				'click',
				function() {
					var $checkecodes = $("input[name='checkcode']");
					$("#selectAll").prop(
							"checked",
							$checkcodes.length == $checkcodes
									.filter(":checked").length ? true : false);
				});

		function doSort() {
			$("#sortForm").ajaxSubmit({
				success : function(data) {
					switch (data.flag) {
					case -1:
						Kit.alert("网络繁忙...，请重试");
						return;
					case 0:
						window.location.reload();
					}
				}
			});
		}
		/* $(function() {
				$("#selectAll").click(function() {
					$(":checkbox[name='checkcode']").prop("checked", this.checked);
				});
			});   */

		/* function select() {
			$("#selectAll").click(function() {
				$("#checkcode").prop("checked", this.checked);
			});
		} */
	</script>
</body>
</html>